<template>
  <div>
    <div>
      <h4>补充资料</h4>
      <el-row type="flex" justify="space-between">
        <el-col :span="6">
          <span>职业 </span>
          <el-select v-model="pgForm.supplementary_information_value1" ref="supplementary_information_value1" placeholder="请选择">
            <el-option
              v-for="item in optionsSupplement"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <span>文化程度 </span>
          <el-select v-model="pgForm.supplementary_information_value2" ref="supplementary_information_value2" placeholder="请选择">
            <el-option
              v-for="item in optionsCulture"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="8">
          <span>就诊原因（产后康复）</span>
          <el-select v-model="pgForm.supplementary_information_value3" ref="supplementary_information_value3" placeholder="请选择">
            <el-option
              v-for="item in optionsSeeDoctor"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="10">
          <span>因漏尿或脱垂等要求康复治疗：</span>
          <el-select v-model="pgForm.supplementary_information_value4" ref="supplementary_information_value4" placeholder="请选择">
            <el-option
              v-for="item in optionsLouniao"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="12">
          <el-input style="width: 90%" placeholder="备注" v-model="pgForm.supplementary_information_textarea1" ref="supplementary_information_textarea1">
          </el-input>
        </el-col>
        </el-row>
      <el-row type="flex" justify="space-between">
        <el-col :span="9">
          <span>盆底手术后检查 </span>
          <el-select v-model="pgForm.supplementary_information_value5" ref="supplementary_information_value5" placeholder="请选择" style="width: 40%">
            <el-option
              v-for="item in optionsPelvic"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="5">
          <span>身高 </span>
          <el-input style="width: 50%" v-model="pgForm.supplementary_information_input1" ref="supplementary_information_input1" placeholder=""></el-input>
          <span> CM</span>
        </el-col>
        <el-col :span="5">
          <span>体重 </span>
          <el-input style="width: 40%" v-model="pgForm.supplementary_information_input2" ref="supplementary_information_input2" placeholder=""></el-input>
          <span> KG</span>
        </el-col>
        <el-col :span="5">
          <span>BMI </span>
          <el-input style="width: 40%" v-model="bmi" ref="supplementary_information_bmi" placeholder=""></el-input>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-between">
        <el-col :span="6">
          <span>哺乳期 </span>
          <el-select style="width: 40%" v-model="pgForm.supplementary_information_value6" ref="supplementary_information_value6" placeholder="请选择">
            <el-option
              v-for="item in optionsLactation"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="8">
          <span>是否已接受某种治疗 </span>
          <el-select style="width: 30%" v-model="pgForm.supplementary_information_value7" ref="supplementary_information_value7" placeholder="请选择" >
            <el-option
              v-for="item in optionsLactation"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="8">
          <span>接受治疗日期 </span>
          <el-input style="width: 50%" v-model="pgForm.supplementary_information_input4" ref="supplementary_information_input4" placeholder="请输入内容"></el-input>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-between">
        <el-col :span="11">
          <span>尿失禁治疗</span>
          <div class="grid-content">
            <el-radio-group v-model="pgForm.supplementary_information_radio1" ref="supplementary_information_radio1">
              <el-radio label="药物治疗">药物治疗</el-radio>
              <el-radio label="手术治疗">手术治疗</el-radio>
              <el-radio label="康复治疗">康复治疗</el-radio>
              <el-radio label="其他治疗">其他治疗</el-radio>
              <el-input v-model="pgForm.supplementary_information_input5" ref="supplementary_information_input5" placeholder="备注"></el-input>
            </el-radio-group>
          </div>
        </el-col>
        <el-col :span="11">
          <span>康复治疗</span>
          <div class="grid-content">
            <el-radio-group v-model="pgForm.supplementary_information_radio2" ref="supplementary_information_radio2">
              <el-radio label="Kegel运动">Kegel运动</el-radio>
              <el-radio label="电刺激">电刺激</el-radio>
              <el-radio label="磁刺激">磁刺激</el-radio>
              <el-radio label="生物反馈">生物反馈</el-radio>
              <el-radio label="阴道哑铃">阴道哑铃</el-radio>
              <el-input v-model="pgForm.supplementary_information_input6" ref="supplementary_information_input6" placeholder="备注"></el-input>
            </el-radio-group>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "supplementary_information",
  title: "补充资料",
  created() {
    if(this.istrans){
      this.pgForm=this.fromdata
    }
  },
  props: {
    fromdata:{},
    istrans:false,
  },
  data(){
    return{
      pgForm: {
        supplementary_information_value1: '',
        supplementary_information_value2: '',
        supplementary_information_value3: '',
        supplementary_information_value4: '',
        supplementary_information_value5: '',
        supplementary_information_value6: '',
        supplementary_information_value7: '',
        supplementary_information_input1: '',
        supplementary_information_input2: '',
        supplementary_information_input3: '',
        supplementary_information_input4: '',
        supplementary_information_input5: '',
        supplementary_information_input6: '',
        supplementary_information_textarea1: '',
        supplementary_information_radio1: '',
        supplementary_information_radio2: '',
        supplementary_information_bmi: '',
        supplementary_information_input: '',
        supplementary_information_textarea: '',
        supplementary_information_radio: ''
      },
      optionsSupplement: [{
        value: '体力劳动者',
        label: '体力劳动者'
      }, {
        value: '脑力劳动者',
        label: '脑力劳动者'
      }],
      optionsCulture: [{
        value: '小学及以下',
        label: '小学及以下'
      }, {
        value: '中学',
        label: '中学'
      }, {
        value: '大学及以上',
        label: '大学及以上'
      }],
      optionsSeeDoctor: [{
        value: '治疗组',
        label: '治疗组'
      }, {
        value: '观察组',
        label: '观察组'
      }],
      optionsLouniao: [{
        value: 'SUI(B1)',
        label: 'SUI(B1)'
      }, {
        value: 'POP(B2)',
        label: 'POP(B2)'
      }, {
        value: 'OAB(B3)',
        label: 'OAB(B3)'
      }, {
        value: '疼痛(B4)',
        label: '疼痛(B4)'
      }],
      optionsPelvic: [{
        value: '治疗组',
        label: '治疗组'
      }, {
        value: '观察组',
        label: '观察组'
      }],
      optionsLactation: [{
        value: '是',
        label: '是'
      }, {
        value: '否',
        label: '否'
      }],
    }
  },
  computed:{
    bmi(){
      let bmi = this.pgForm.supplementary_information_input2 / ((this.pgForm.supplementary_information_input1/100) * (this.pgForm.supplementary_information_input1/100)) || '';
      this.pgForm.supplementary_information_bmi = bmi;
      return bmi;
    },
  },
}
</script>

<style scoped>

.el-row {
  margin: 10px 0;
  padding: 20px 20px;
  background-color: #f9f9f9;
  flex-wrap: wrap;
  flex-direction: row;
}
.el-col {
  margin: 10px 0;
}

.el-radio-group{
  padding: 10px 20px;
}
.el-radio{
  display: block;
  margin-bottom: 15px;
}
</style>
